<!--  -->
<template>
    <div class="signup">
        <!-- <HeaderTop title="珍馐坊"></HeaderTop> -->
        <form class="signup-wrapper" @submit.prevent="login">
            <div class="container">
                <img src="./img/logo.png" alt="" class="logo">
                <div class="main">
                    <h1>珍馐坊</h1>
                    <section class="signup_tel">
                        <input type="tel" v-model="phone" maxlength="13" placeholder="手机号" class="tel">
                    </section>
                    <section class="signup_verification">
                        <input type="tel" v-if="showPwd" v-model="pwd" placeholder="密码" class="veri">
                        <input type="password" v-if="!showPwd" v-model="pwd" placeholder="密码" class="veri">
                        <div class="login_icon">
                            <img src="./img/mima.png" v-if="showPwd" @click="showPwd=false" alt="">
                            <img src="./img/mima1.png" v-if="!showPwd" @click="showPwd=true" alt="">
                        </div>
                    </section>
                    <div class="signup-btn">
                        <div class="btn1" @click="$router.push('/signup')">立即注册</div>
                        <div class="btn2" @click="$router.push('/forgetpwd')">忘记密码</div>
                    </div>
                    <button class="login_submit">登录</button>
                    <img class="third" src="./img/wxdl.png" alt="">
                    <img class="wechat" src="./img/wx.png" alt="" @click="wxLogin">
                </div>
            </div>
        </form>
    </div>
</template>

<script>
// import HeaderTop from '../../components/HeaderTop/HeaderTop'
export default {
    data () {
        return {
            phone:'', //手机号
            pwd:'', //密码
            showPwd:false
        };
    },

    // components: {
    //     HeaderTop
    // },

    computed: {
        // rightPhoneNumber(){
        //     return /^1\d{10}$/.test(this.phone)
        // }
    },

    methods: {
        // 异步登录
        async login(){
            const {phone,pwd} = this
            if(!this.phone){
                this.$toast('请输入手机号');
                // 输入手机号
                // this.$dialog.alert({
                //     message: '输入手机号'
                // })
                return 
            }
            if(!this.pwd){
                // 输入密码
                this.$toast('请输入密码');
                // this.$dialog.alert({
                //     message: '输入密码'
                // })
                return
            }
            let result = await this.API.reqLogin({phone,password: pwd})
            console.log('这是后端的数据',result)
            if(result.retCode === '000'){
                const userInfo = result.retData
                // 将userInfo放到vuex的state中
                this.$store.dispatch('recordUserInfo',userInfo)
                console.log(userInfo)
                localStorage.setItem('userId', userInfo.userInfo.id)
                localStorage.setItem('token',userInfo.token)
                localStorage.setItem('userInfo',JSON.stringify(userInfo))
                console.log('sss', localStorage.getItem('userInfo'))
                // 存储登录状态
                // localStorage.setItem("Flag","isLogin") //如果Flag有值且值为isLogin的时候 证明已经登陆了
                // 路由跳转到首页
                this.$router.replace('/msite')
            }
            if(result.retCode !== '000'){
                this.$toast(result.retMsg);
            }
            // if(result.retCode === '107'){
            //     this.$toast('手机号不规范');
            //     // this.$dialog.alert({
            //     //     message: '手机号不规范'
            //     // })
            //     return
            // }
            // if(result.retCode === '012'){
            //     this.$dialog.alert({
            //         message: '账号名或密码错误'
            //     })
            //     return
            // }
        },

        // 微信登录
        wxLogin(){
            console.log('微信登录')
            window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd392c1f4e54ec9e8&redirect_uri=http%3a%2f%2fwww.zxfzhejiang.com%2fzxf_html%2fwxlogin.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
        }
    }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.signup
    // margin-top 45px
    padding-bottom 0 !important
    width 100%
    height 100%
    background #fff
    .signup-wrapper
        display flex
        justify-content center
        width 100%
        // top-border-1px(#e4e4e4)
        padding-top 60px
        .container
            position relative
            width 90%
            height 490px
            border-radius 25px
            box-shadow 0 0 30px #e4e4e4
            margin-top 40px
            .logo
                position absolute
                width 130px
                height 130px                
                top -13%
                left 50%
                transform translateX(-65px)
            .main
                padding-top 80px
                display flex
                flex-direction column
                align-items center
                h1
                    font-size 20px
                    font-weight bold
                    margin-bottom 30px
                    text-align center
                section
                    border 1px solid #e4e4e4
                    width 252px
                    border-radius 100px
                    overflow hidden
                    height 47px
                    margin-bottom 16px
                    input 
                        background-repeat no-repeat
                        background-size 26px 28px
                        background-position 15px 10px
                        height 47px
                        padding-left 50px
                        line-height 47px
                        font-size 14px
                        &.tel
                            background-image url(./img/man.png)
                        // &.veri
                        //     background-image url(./img/mima.png)
                    &.signup_verification
                        position relative
                        .login_icon
                            // display inline-block
                            position absolute
                            top 10px
                            left 15px
                            img 
                                height 25px
                button 
                    padding 0
                    margin 0
                    border:1px solid transparent
                    outline none 
                    background #fff
                .signup-btn
                    font-size 12px
                    width 252px
                    color #3B3B3B
                    margin-bottom 16px
                    .btn1
                        display inline-block
                        padding-left 20px
                    .btn2
                        display inline-block
                        padding-right 20px
                        float right
                .login_submit
                    width 252px
                    border-radius 100px   
                    height 47px
                    margin-bottom 16px
                    box-shadow 0 0 30px #e4e4e4
                .third
                    height 8px
                    margin 20px 0
                .wechat
                    height 25px
</style>